<template>
	<view class="navs-wrap">
		<view class="user-navs" style="display: flex;justify-content: center;align-items: center;">
			<view style="height: 40px;display: flex;justify-content: center;align-items: center;">
				<image v-if="user.vip1" src="../../../static/image/home/vip.png" style="width: 25px;" mode="widthFix">
				</image>
				<image v-if="user.vip2" src="../../../static/image/home/vip1.png" style="width: 25px;" mode="widthFix">
				</image>
				<image v-if="user.vip3" src="../../../static/image/home/vip2.png" style="width: 25px;" mode="widthFix">
				</image>
				<image v-if="user.vip4" src="../../../static/image/home/vip3.png" style="width: 25px;" mode="widthFix">
				</image>
				<view style="color: #3D3D3D;margin-left: 10px;font-size: 16px;">{{$store.state.loginUser.vipName}}
				</view>
				</views>
				<zb-tooltip color="transparent" placement="bottom-end" ref="tooltip12"  >
					<image src="../../../static/image/home/msg.png" style="height: 20px;width: 20px;margin-left: 20px;"
						@click="showMsg=true">
						<fui-badge type="danger" absolute top="0" :value="lastMeassageNum2"></fui-badge>
					</image>
					<view slot="content" class="card" style="height: 100%;">
						<view
							style="display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid rgb(216, 216, 216);padding-bottom: 20px;">
							<view class="text" style="font-size: 18px;">消息中心</view>
							<image src="../../../static/image/user/qc.png" @click="onClose1"
								style="width: 26px;height: 26px;"></image>
						</view>
						<view class="align-center"
							style="margin-top: 40rpx;border-bottom: 1px solid rgb(216, 216, 216);padding-bottom: 20px;">
							<view @click="goUrl('/pages/user/index')" style="width: 25%;">
								<view style="display: flex;justify-content: center;">
									<image src="../../../static/image/user/like.png" class="imgbg"
										style="width: 56px;height:56px ;">
									</image>
								</view>
								<view style="display: flex;justify-content:center;align-items: center;">
									<view class="text1" style="margin-top: 5px;font-size: 14px;"
										@click="setCategory(item)">
										赞和收藏
									</view>
								</view>
							</view>
							<view style="margin-left: 20px;width: 25%;">
								<view style="display: flex;justify-content: center;">
									<image src="../../../static/image/user/gz.png" class="imgbg"
										style="width: 56px;height:56px ;">
									</image>
								</view>
								<view style="display: flex;justify-content:center;align-items: center;">
									<view class="text1" style="margin-top: 5px;font-size: 14px;"
										@click="setCategory(item)">
										关注
									</view>
								</view>
							</view>
							<view style="margin-left: 20px;width: 25%;">
								<view style="display: flex;justify-content: center;">
									<image src="../../../static/image/user/tk.png" class="imgbg"
										style="width: 56px;height:56px ;">
									</image>
								</view>
								<view style="display: flex;justify-content:center;align-items: center;">
									<view class="text1" style="margin-top: 5px;font-size: 14px;"
										@click="setCategory(item)">
										被同款
									</view>
								</view>
							</view>
							<view style="margin-left: 20px;width: 25%;">
								<view style="display: flex;justify-content: center;">
									<image src="../../../static/image/user/pl.png" class="imgbg"
										style="width: 56px;height:56px ;">
									</image>
								</view>
								<view style="display: flex;justify-content:center;align-items: center;">
									<view class="text1" style="margin-top: 5px;font-size: 14px;"
										@click="setCategory(item)">
										评论
									</view>
								</view>
							</view>
						</view>
						<view class="align-center" style="margin-top: 65rpx;border-bottom: 1px solid rgb(216, 216, 216);padding-bottom: 20px;">
							<view>
								<view class="align-center">
									<image class="fui-list__icon" src="/static/image/user/gg.png" mode="widthFix">
									</image>
									<view
										style="display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;margin-left: 10px;">
										<view
											style="justify-content: flex-start;display: flex;align-items: center;align-content: space-between;">
											<view class="title1">AI官方公告</view>
											<view class="title2" style="position: absolute;right: 50rpx;">
												{{message.newSystemMsg.time}}</view>
										</view>
										<view class="title2">{{message.notice?message.notice.name:'查看系统公告'}}</view>
									</view>
								</view>
								<view class="align-center" style="margin-top: 50rpx;">
									<image class="fui-list__icon" src="/static/image/user/sy.png" mode="widthFix">
									</image>
									<view
										style="display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;margin-left: 10px;">
										<view
											style="justify-content: flex-start;display: flex;align-items: center;align-content: space-between;">
											<view class="title1">AI我的收益</view>
											<view class="title2" style="position: absolute;right: 50rpx;">
												暂无</view>
										</view>
										<view class="title2">暂无</view>
									</view>
								</view>
								<view class="align-center" style="margin-top: 50rpx;">
									<image class="fui-list__icon" src="/static/image/user/fk.png" mode="widthFix">
									</image>
									<view
										style="display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;margin-left: 10px;">
										<view
											style="justify-content: flex-start;display: flex;align-items: center;align-content: space-between;">
											<view class="title1">AI服务反馈</view>
											<view class="title2" style="position: absolute;right: 50rpx;">
												暂无</view>
										</view>
										<view class="title2">暂无</view>
									</view>
								</view>
								<view class="align-center" style="margin-top: 50rpx;">
									<image class="fui-list__icon" src="/static/image/user/AI.png" mode="widthFix">
									</image>
									<view
										style="display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;margin-left: 10px;">
										<view
											style="justify-content: flex-start;display: flex;align-items: center;align-content: space-between;">
											<view class="title1">AI生成</view>
											<view class="title2" style="position: absolute;right: 50rpx;">
												{{message.newTaskFinish.time}}</view>
										</view>
										<view class="title2">{{message.newTaskFinish.notice.name}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</zb-tooltip>
				<zb-tooltip color="transparent" placement="bottom-end" ref="tooltipuser"  >
					<image :src="$store.state.loginUser.avator"
						style="height: 30px;width: 30px;border-radius: 50%;margin-left: 20px;" ></image>
						<view slot="content" class="card">
							<view>
								<image src="../../../static/image/home/close.png" @click="$refs.tooltipuser.close()"
									style="position: absolute;right: 15px;top: 14px;width: 10px;height: 10px;"></image>
							</view>
							<view style="display: flex;justify-content: flex-start;align-items: center;margin-top: 10rpx;">
								<view class="text">{{$store.state.loginUser.name}}</view>
								<view class="vip" v-if="user.vip1"
									style="display: flex;justify-content: center;align-items: center;margin-left: 30rpx;">
									<image src="../../../static/image/home/vip.png" style="width: 20px;" mode="widthFix">
									</image>{{$store.state.loginUser.vipName}}
								</view>
								<view class="vip1" v-if="user.vip2"
									style="display: flex;justify-content: center;align-items: center;margin-left: 30rpx;">
									<image src="../../../static/image/home/vip1.png" style="width: 20px;" mode="widthFix">
									</image>{{$store.state.loginUser.vipName}}
								</view>
								<view class="vip2" v-if="user.vip3"
									style="display: flex;justify-content: center;align-items: center;margin-left: 30rpx;">
									<image src="../../../static/image/home/vip3.png" style="width: 20px;" mode="widthFix">
									</image>{{$store.state.loginUser.vipName}}
								</view>
								<view class="vip3" v-if="user.vip4"
									style="display: flex;justify-content: center;align-items: center;margin-left: 30rpx;">
									<image src="../../../static/image/home/vip3.png" style="width: 20px;" mode="widthFix">
									</image>{{$store.state.loginUser.vipName}}
								</view>
								<view style="margin-left: 48rpx;">
									<image src="../../../static/image/home/edit.png" style="width: 15px;height: 15px;">
									</image>
								</view>
							</view>
							<view class="align-center" style="margin-top: 40rpx;">
								<view class="text1">关注&nbsp;{{user.fucusNum}}</view>
								<view class="text1" style="margin-left: 60rpx;">粉丝&nbsp;{{user.fansNum}}</view>
								<view class="text1" style="margin-left: 60rpx;">发布&nbsp;{{user.productNum}}</view>
							</view>
							<view class="align-center" style="margin-top: 60rpx;">
								<view @click="goUrl('/pages/user/index')">
									<view style="display: flex;justify-content: center;">
										<image src="../../../static/image/home/index.png" class="imgbg"
											style="width: 35px;height:35px ;">
										</image>
									</view>
									<view style="display: flex;justify-content:center;align-items: center;">
										<view class="text1" style="margin-top: 5px;" >
											我的主页
										</view>
									</view>
								</view>
								<view style="margin-left: 20px;" @click="goUrl('/pages/user/vip/vip')">
									<view style="display: flex;justify-content: center;">
										<image src="../../../static/image/home/svip.png" class="imgbg"
											style="width: 35px;height:35px ;">
										</image>
									</view>
									<view style="display: flex;justify-content:center;align-items: center;">
										<view class="text1" style="margin-top: 5px;" >
											我的会员
										</view>
									</view>
								</view>
								<view style="margin-left: 20px;" @click="goUrl('/pages/user/credit/credit')">
									<view style="display: flex;justify-content: center;">
										<image src="../../../static/image/home/coin.png" class="imgbg"
											style="width: 35px;height:35px ;">
										</image>
									</view>
									<view style="display: flex;justify-content:center;align-items: center;">
										<view class="text1" style="margin-top: 5px;" >
											我的积分
										</view>
									</view>
								</view>
								<view style="margin-left: 20px;" @click="goUrl('/pages/user/content/content')">
									<view style="display: flex;justify-content: center;">
										<image src="../../../static/image/home/admin.png" class="imgbg"
											style="width: 35px;height:35px ;">
										</image>
									</view>
									<view style="display: flex;justify-content:center;align-items: center;">
										<view class="text1" style="margin-top: 5px;" >
											创作者中心
										</view>
									</view>
								</view>
								<view style="margin-left: 20px;" @click="goUrl('/pages/user/favorite/index')">
									<view style="display: flex;justify-content: center;">
										<image src="../../../static/image/home/like.png" class="imgbg"
											style="width: 35px;height:35px ;">
										</image>
									</view>
									<view style="display: flex;justify-content:center;align-items: center;">
										<view class="text1" style="margin-top: 5px;">
											赞和收藏
										</view>
									</view>
								</view>
							</view>
							<view class="align-center" style="margin-top: 65rpx;">
								<view class="text1" style="display: flex;justify-content: center;align-items: center;">
									<image src="../../../static/image/home/share.png" style="width: 12px;margin-right: 5px;"
										mode="widthFix">
									</image>邀请好友
								</view>
								<view class="text1"
									style="display: flex;justify-content: center;align-items: center;margin-left: 30rpx;">
									<image src="../../../static/image/home/setting.png"
										style="width: 12px;margin-right: 5px;" mode="widthFix">
									</image>密码设置
								</view>
								<view class="text1"
									style="display: flex;justify-content: center;align-items: center;margin-left: 30rpx;">
									<image src="../../../static/image/home/out.png" style="width: 12px;margin-right: 5px;"
										mode="widthFix">
									</image>退出登录
								</view>
							</view>
						</view>
				</zb-tooltip>
				

			</view>
		</view>
	</view>
</template>

<script>
	import topNavs from '@/common/config/user/top-navs.config.js';

	export default {
		props: {
			isWhiteBack: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				showMsg: false,
				show: false,
				topNavs,
				user: [],
				lastMeassageNum2: 0,
				lastMeassageNum3: 0,
				message: [],
			}
		},
		created() {
			let that = this;
			this.$util.request('/api/v1/user/mine', {}, (res) => {
				console.log('用户信息', res.data)
				that.user = res.data
				console.log('user', that.user)
			}, true);
			this.messageInfo()
		},
		methods: {
			setTasb(index){
				this.$store.commit('tab', index);
			},
			messageInfo() {
				let that = this;
				this.$util.request('/api/v1/user/messageInfo', {
					page: 0,
					size: 100
				}, (res) => {
					console.log(res)
					if (res.code == 0) {
						var newTime = res.data.newTime;
						that.message = res.data;
						console.log('消息', res)
						// that.lastTaskFinishTime = res.data.newTaskFinish.time
						// that.lastSystemTime = res.data.newSystemMsg.time
						that.lastMeassageNum2 = res.data.newNum2
						if (that.lastMeassageNum2 > 99) {
							that.lastMeassageNum2 = "99+";
						}
						that.lastMeassageNum3 = res.data.newNum3
						if (that.lastMeassageNum3 > 99) {
							that.lastMeassageNum3 = "99+";
						}
						console.log(that.lastMeassageNum2)
						uni.setStorageSync("newTime", newTime);
						// var readTime = uni.getStorageSync("readTime");
						// if (newTime) {
						// 	var red = readTime != newTime
						// 	console.log(readTime)
						// 	console.log(newTime)
						// 	console.log(red)
						// 	if (red) {
						// 		uni.showTabBarRedDot({
						// 			index: 3
						// 		})
						// 	}
						// }
						// var notice = res.data.data.newSystemMsg.notice;
						// if (notice) {
						// 	var name = notice.name;
						// 	var content = notice.content;
						// 	uni.setStorageSync("notice", name + "------" + content);
						// }
						console.log('返回正确回调', res)
					} else {
						uni.showToast({
							title: res.data.message
						})
					}
				}, true);
			},
			goUrl(url) {
				uni.navigateTo({
					url: url,
					fail(err) {
						console.log(err)
					}
				})
			},
			//显示气泡框
			bubble() {
				this.show = true
			},
			//气泡框item点击事件
			itemClick(e) {
				console.log(e)
				this.onClose()
			},
			//隐藏气泡框
			onClose() {
				this.show = false
			},
			//显示气泡框
			bubble1() {
				this.showMsg = true
			},
			//气泡框item点击事件
			itemClick1(e) {
				console.log(e)
				this.onClose1()
			},
			//隐藏气泡框
			onClose1() {
				this.showMsg = false
			},
			logout() {
				this.$alert('确定退出登录吗？', {}, () => {
					uni.showLoading({
						title: '处理中...',
						mask: true
					});
					this.$util.request('/logout', {}, () => {
						uni.hideLoading();

						this.$store.commit('logout');
						uni.reLaunch({
							url: '/pages/index'
						});
					});
				});
			}
		}
	}
</script>

<style lang="scss">
	.title1 {
		font-family: 思源黑体;
		font-size: 16px;
		font-weight: bold;
		letter-spacing: 0px;
		color: #000000;
	}

	.title2 {
		font-family: OPPOSans;
		font-size: 14px;
		font-weight: normal;
		text-align: right;
		letter-spacing: 0px;

		color: #3D3D3D;
	}

	.fui-list__icon {
		width: 43px;
		height: 43px;
	}

	.align-center {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.card {
		padding: 60rpx;
		padding-top: 40rpx;
		position: relative;
		width: 800rpx;
		height: 500rpx;
		border-radius: 12px;
		opacity: 1;
		background: #FFFFFF;
		box-sizing: border-box;
		border: 1px solid #E5E5E5;

		.text {
			font-family: Source Han Sans;
			font-size: 24px;
			font-weight: bold;
			line-height: 10px;
			letter-spacing: 0px;

			font-feature-settings: "kern" on;
			color: #3D3D3D;
		}

		.vip {
			padding: 5px;
			font-family: Source Han Sans;
			font-size: 14px;
			font-weight: 900;
			color: #FFFFFF;
			width: 120px;
			height: 20px;
			border-radius: 50px;
			opacity: 1;
			background: radial-gradient(149% 149% at 0% -7%, #8D8D8D 0%, #636363 100%);
		}

		.vip1 {
			padding: 5px;
			font-family: Source Han Sans;
			font-size: 14px;
			font-weight: 900;
			color: #7B91A5;
			width: 120px;
			height: 20px;
			border-radius: 50px;
			opacity: 1;
			background: radial-gradient(55% 55% at 13% 5%, #D8E5EA 0%, #C9D9DE 100%);
		}

		.vip2 {
			padding: 5px;
			font-family: Source Han Sans;
			font-size: 14px;
			font-weight: 900;
			color: #C08049;
			width: 120px;
			height: 20px;
			border-radius: 50px;
			opacity: 1;
			background: radial-gradient(123% 123% at 0% 10%, #FFECC1 0%, #EAA771 99%);
		}

		.vip3 {
			padding: 5px;
			font-family: Source Han Sans;
			font-size: 14px;
			font-weight: 900;
			color: #885DD6;
			width: 120px;
			height: 20px;
			border-radius: 50px;
			opacity: 1;
			background: linear-gradient(104deg, #D3C2FF 5%, #D3BAFC 45%, #AB94FE 87%);
		}

		.text1 {
			font-family: Source Han Sans;
			font-size: 12px;
			font-weight: normal;
			line-height: 10px;
			letter-spacing: 0px;
			font-feature-settings: "kern" on;
			color: #3D3D3D;
		}
	}

	.navs-wrap {
		@extend %flex-align-center;

		.user-navs {
			font-size: 12px;
			position: relative;

			&:hover {

				.navs-trigger {
					color: #424242;
					background-color: $bg-color;
				}

				.nav-list {
					height: 150px;
					padding: 7px 0;
				}
			}

			.navs-trigger {
				position: relative;
				z-index: 10;
				width: 110px;
				height: 40px;
				color: #b0b0b0;
				@extend %flex-align-center;
				justify-content: center;

				&.gray {
					color: #757575;
				}

				&:hover {
					color: $color-primary;
				}

				.user-name {
					display: inline-block;
					max-width: 75px;
				}

				.icon {
					font-size: 12px;
					font-weight: bold;
					margin-left: 5px;
					transform: rotate(90deg);
				}
			}

			.nav-list {
				z-index: 9;
				position: absolute;
				left: 0;
				right: 0;
				top: 100%;
				color: #424242;
				height: 0;
				overflow: hidden;
				background-color: $bg-color;
				box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
				transition: height .3s;

				.nav {
					height: 30px;
					line-height: 30px;
					text-align: center;
					cursor: pointer;

					&:hover {
						color: $color-primary;
						background-color: $bg-color-grey;
					}
				}
			}
		}

		.link {
			color: #b0b0b0;
			cursor: pointer;
			line-height: 40px;

			&:hover {
				color: #FFFFFF;
			}

			&.no-hover {
				color: #757575;

				&:hover {
					color: #757575;
				}
			}
		}

		.separator {
			margin: 0 .4rem;
			color: #424242;
			line-height: 40px;

			&.gray {
				color: #e0e0e0;
			}
		}
	}
</style>